<template>
	<view class="jindutiao">
		<!-- <u-count-down class="my-count-down" ref="uCountDown" :timestamp="timestamp" :show-hours="false" :autoplay="true" @change="change"></u-count-down> -->
		<u-line-progress :striped="true" :percent="percentNum" :active-color="acColor" :striped-active="true"
			@change="change" :show-percent="true"></u-line-progress>
	</view>

</template>

<script>
	export default {
		name: 'CircleCountDown',
		props: {
			timestamp: {
				type: Number,
				default: 30,
			}
		},
		data() {
			return {
				timer1: null,
				timer2: null,
				percentNum: 50,
				name: 'haha',
				acColor: '#2979ff',
			}
		},
		onLoad() {},
		watch: {
			percentNum: {
				handler(newValue, oldValue) {
					console.log('监听percentNum的变化--新值', newValue); // 变化之后的值
					console.log('监听percentNum的变化--原来的值', oldValue); // 变化之前的值
					if (newValue == '100') {
						this.change()
					}
				},
				immediate: true,
			},
		},
		mounted() {
			var timer1 = setInterval(() => {
				this.percentNum += 10
				if (this.percentNum == 90) {
					clearInterval(timer1);
					this.addOneSchedule()
				}
				console.log('当前进度1', this.percentNum);
			}, 800)
		},
		methods: {
			change() {
				console.log('传0到父组件');
				this.$emit('change', 0);
			},
			//进度达到90之后开始每次只加1
			addOneSchedule() {
				var timer2 = setInterval(() => {
					this.percentNum += 1
					if (this.percentNum == 99) {
						this.acColor = '#19be6b'
					}
					if (this.percentNum == 100) {
						this.acColor = '#19be6b'
						clearInterval(timer2);
					}
					console.log('当前进度2', this.percentNum);
				}, 400)
			},
		}
	};
</script>

<style lang="less" scoped>
	.jindutiao {
		::v-deep .u-mode-center-box {
			width: 700px;
		}
	}



	@font-face {
		font-family: 'UnidreamLED';
		font-style: normal;
		font-weight: 400;
		src: url(./UnidreamLED.woff) format('woff');
	}

	.my-count-down {
		// position: absolute;
		// left: 8rpx;
		// top: 8rpx;
	}

	.u-progress-content {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.u-progress-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #fb9126;
	}

	/deep/.u-countdown-item {
		font-family: 'UnidreamLED';
	}

	.u-progress-info {
		font-size: 28rpx;
	}
</style>